<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>后端牛 &#8211; 一起聊聊运营、增长黑客和WordPress</title>
    <style type="text/css">
        img.wp-smiley,
        img.emoji {
            display: inline !important;
            border: none !important;
            box-shadow: none !important;
            height: 1em !important;
            width: 1em !important;
            margin: 0 .07em !important;
            vertical-align: -0.1em !important;
            background: none !important;
            padding: 0 !important;
        }
    </style>
    <link rel='stylesheet' id='lean-toolkit-css'  href='../css/toolkit.css' type='text/css' media='all' />
    <link rel='stylesheet' id='lean-font-awesome-css'  href='../css/font-awesome.min.css' type='text/css' media='all' />
    <style type="text/css" id="custom-background-css">
        body.custom-background { background-color: #f8f9fa; }
    </style>
    <link rel="icon" href="http://assets.qingzhuti.com/wp-content/uploads/2017/07/cropped-fx-32x32.png" sizes="32x32" />
    <link rel="icon" href="http://assets.qingzhuti.com/wp-content/uploads/2017/07/cropped-fx-192x192.png" sizes="192x192" />
    <link rel="apple-touch-icon-precomposed" href="http://assets.qingzhuti.com/wp-content/uploads/2017/07/cropped-fx-180x180.png" />
    <meta name="msapplication-TileImage" content="http://assets.qingzhuti.com/wp-content/uploads/2017/07/cropped-fx-270x270.png" />
</head>
<body class="post-template-default single single-post postid-380 single-format-standard custom-background" >
<header class="header">
    <nav class="navbar navbar-expand-lg navbar-shadow navbar-dark bg-primary fixed-top" id="primary-navbar" role="navigation">
        <div class="container">
            <a class="navbar-brand" href="http://blog.houduanniu.com/" title="后端牛" rel="home">后端牛</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div id="navbarNavDropdown" class="collapse navbar-collapse">
                <div class="mr-auto">
                    <ul id="main-nav" class="navbar-nav mr-auto">
                        <li class="nav-item active"><a title="首页" href="http://blog.houduanniu.com/" class="nav-link">首页</a></li>
                        <li class="nav-item"><a title="WordPress" href="##wordpress" class="nav-link">WordPress</a></li>
                        <li class="nav-item"><a title="运营" href="##growth" class="nav-link">运营</a></li>
                        <li class="nav-item"><a title="状态" href="http://blog.houduanniu.com/type/status" class="nav-link">状态</a></li>
                        <li class="nav-item"><a title="链接" href="http://blog.houduanniu.com/type/link" class="nav-link">链接</a></li>
                        <li class="nav-item"><a title="关于" href="http://blog.houduanniu.com/about" class="nav-link">关于</a></li>
                        <li class="nav-item"><a title="留言板" href="http://blog.houduanniu.com/contact" class="nav-link">留言板</a></li>
                        <li class="nav-item dropdown dropdown"><a title="更多" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li class="nav-item"><a title="标签云" href="http://blog.houduanniu.com/tag" class="nav-link">标签云</a></li>
                                <li class="nav-item"><a title="知识管理" href="##knowledge-management" class="nav-link">知识管理</a></li>
                                <li class="nav-item"><a title="日常随笔" href="##essay" class="nav-link">日常随笔</a></li>
                                <li class="nav-item"><a title="没地方可放的" href="##uncategorized" class="nav-link">没地方可放的</a></li>
                                <li class="nav-item"><a title="主题" href="http://blog.houduanniu.com/theme" class="nav-link">主题</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <form class="form-inline" role="search" method="get" id="searchform" action="###">
                    <input class="form-control mr-sm-2" type="text" placeholder="搜索..." aria-label="搜索" name="s">
                </form>
            </div>

        </div>
    </nav>
</header><!-- ./header -->

<main class="site-content">

    <div class="container mt-4">
        <div class="site-main">
            <div class="row">
                <div class="col-lg-8">
                    <main class="main-content">


                        <div class="card card-shadow">
                            <div class="card-body">


                                <h1 class="card-title mb-4">开发自己的WordPress主题</h1>
                                <p class="card-text text-link-color-muted">
                                    <small>
                                        <span class="post-time">2017年6月13日</span>&nbsp;&bull;&nbsp;<a href="http://qingzhuti.com/category/wordpress" rel="category tag">WordPress</a>			</small>
                                </p>

                                <div class="entry-content pt-3">


                                    <h2>写给谁</h2>
                                    <p>没有特定对象，人人均可学习，但如果你没有html和css的基础，建议到<a href="http://www.w3school.com.cn/html/">这里</a>学习。</p>
                                    <h2>谁学快</h2>
                                    <p>初级：熟练HTMl+CSS<br />
                                        进阶：Javascript<br />
                                        高级：PHP</p>
                                    <h2>基础</h2>
                                    <p>WordPres的主题存放在 wp-content/themes/ 文件下，每一个文件夹对应一个主题；</p>
                                    <p>每个主题文件夹中常见文件介绍：</p>
                                    <ol>
                                        <li>style.css：该文件包含模板的一些基础介绍信息和博客的样式，介绍信息会在WordPess后台主题中显示，该文件必须有；</li>
                                        <li>index.php：这是主题的首页，该文件必须有；</li>
                                        <li>header.php、footer.php、sidebar.php：这两个是主题页眉、主题页尾以及边栏；</li>
                                        <li>single.php：显示文章内容；<br />
                                            通常情况下，上面几个文件已经完全可以完成一个主题，但大部分主题还包括以下文件：</li>
                                        <li>archive.php：归档页面模板，例如：分类、标签、作者、日期等；</li>
                                        <li>category.php：文章目录的模板，在改文件不存在，wordpress会用archive显示分类内容；</li>
                                        <li>tag.php：标签的模板，在该文件不存在时，wordpress会用archive显示标签页面内容；</li>
                                        <li>author.php：作者页面模板，在该文件不存在时，wordpress会用archive显示标签页面内容；</li>
                                        <li>date.php：日期归档页面模板，在该文件不存在时，wordpress会用archive显示标签页面内容；</li>
                                        <li>search.php：搜索结果页面模板；</li>
                                        <li>function.php：扩展主题功能的函数放在这个文件里；</li>
                                    </ol>
                                    <h3>模板等级介绍</h3>
                                    <p>从上面我们也了解了，WordPress每类页面都会对应的模板文件，那么当用户访问时，WordPress是如何判定用哪个文件显示内容的呢？在这方面，WordPress本身自带一个漂亮的模板核心。下图是WordPress官网的模板等级介绍图：</p>
                                    <p><a href="http://assets.qingzhuti.com/wp-content/uploads/2014/05/template-hierarchy.png" target="_blank" rel="noopener"><img class="alignnone wp-image-428 size-full" src="http://assets.qingzhuti.com/wp-content/uploads/2014/05/template-hierarchy.png" alt="WordPress模板等级" width="2880" height="1800" srcset="http://assets.qingzhuti.com/wp-content/uploads/2014/05/template-hierarchy.png 2880w, http://assets.qingzhuti.com/wp-content/uploads/2014/05/template-hierarchy-300x188.png 300w, http://assets.qingzhuti.com/wp-content/uploads/2014/05/template-hierarchy-768x480.png 768w, http://assets.qingzhuti.com/wp-content/uploads/2014/05/template-hierarchy-1024x640.png 1024w" sizes="(max-width: 2880px) 100vw, 2880px" /></a></p>
                                    <p>下一章：style.css</p>

                                    <div class="post-tags mt-4 mb-3"><a href="http://qingzhuti.com/tag/wordpress%e4%b8%bb%e9%a2%98%e5%bc%80%e5%8f%91%e6%95%99%e7%a8%8b" class="btn btn-light btn-sm mr-2 mb-2">WordPress主题开发教程</a></div>
                                </div>

                            </div>
                        </div>

                        <nav class="post-navigation card" role="navigation">
                            <div class="card-body">
                                <h4 class="sr-only sr-only-focusable">Post navigation</h4>
                                    <div class="nav-links clearfix">
                                        <div class="nav-previous float-left">&larr; <a href="http://qingzhuti.com/523" rel="prev">上一篇文章</a></div>
                                        <div class="nav-next float-right"><a href="http://qingzhuti.com/378" rel="next">开始创建主题：主样式表（style.css）</a> &rarr;</div>
                                    </div><!-- .nav-links -->

                            </div>
                        </nav><!-- .navigation -->

                        <div class="related-posts card">
                            <div class="card-body"><h3 class="card-title h6 mb-3">你可能喜欢：</h3>

                                <div class="row">

                                    <div class="col-md-4 col-6">
                                        <div class="card border-0">
                                            <a class="entry-img" href="http://qingzhuti.com/554">
                                                <img src="http://assets.qingzhuti.com/wp-content/themes/writing/assets/img/placeholder.png" alt="图片占位符" class="card-img rounded-0">
                                            </a>
                                            <div class="card-body px-0 py-3">
                                                <p class="card-title text-link-color line-clamp-2 text-overflow-ellipsis">
                                                    <a href="http://qingzhuti.com/554" rel="bookmark">内容类型（Post  Type）与文章形式（Post Format）</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4 col-6">
                                        <div class="card border-0">
                                            <a class="entry-img" href="http://qingzhuti.com/554">
                                                <img src="http://assets.qingzhuti.com/wp-content/themes/writing/assets/img/placeholder.png" alt="图片占位符" class="card-img rounded-0">
                                            </a>
                                            <div class="card-body px-0 py-3">
                                                <p class="card-title text-link-color line-clamp-2 text-overflow-ellipsis">
                                                    <a href="http://qingzhuti.com/554" rel="bookmark">内容类型（Post  Type）与文章形式（Post Format）</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4 col-6">
                                        <div class="card border-0">
                                            <a class="entry-img" href="http://qingzhuti.com/554">
                                                <img src="http://assets.qingzhuti.com/wp-content/themes/writing/assets/img/placeholder.png" alt="图片占位符" class="card-img rounded-0">
                                            </a>
                                            <div class="card-body px-0 py-3">
                                                <p class="card-title text-link-color line-clamp-2 text-overflow-ellipsis">
                                                    <a href="http://qingzhuti.com/554" rel="bookmark">内容类型（Post  Type）与文章形式（Post Format）</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4 col-6">
                                        <div class="card border-0">
                                            <a class="entry-img" href="http://qingzhuti.com/554">
                                                <img src="http://assets.qingzhuti.com/wp-content/themes/writing/assets/img/placeholder.png" alt="图片占位符" class="card-img rounded-0">
                                            </a>
                                            <div class="card-body px-0 py-3">
                                                <p class="card-title text-link-color line-clamp-2 text-overflow-ellipsis">
                                                    <a href="http://qingzhuti.com/554" rel="bookmark">内容类型（Post  Type）与文章形式（Post Format）</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4 col-6">
                                        <div class="card border-0">
                                            <a class="entry-img" href="http://qingzhuti.com/554">
                                                <img src="http://assets.qingzhuti.com/wp-content/themes/writing/assets/img/placeholder.png" alt="图片占位符" class="card-img rounded-0">
                                            </a>
                                            <div class="card-body px-0 py-3">
                                                <p class="card-title text-link-color line-clamp-2 text-overflow-ellipsis">
                                                    <a href="http://qingzhuti.com/554" rel="bookmark">内容类型（Post  Type）与文章形式（Post Format）</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4 col-6">
                                        <div class="card border-0">
                                            <a class="entry-img" href="http://qingzhuti.com/554">
                                                <img src="http://assets.qingzhuti.com/wp-content/themes/writing/assets/img/placeholder.png" alt="图片占位符" class="card-img rounded-0">
                                            </a>
                                            <div class="card-body px-0 py-3">
                                                <p class="card-title text-link-color line-clamp-2 text-overflow-ellipsis">
                                                    <a href="http://qingzhuti.com/554" rel="bookmark">内容类型（Post  Type）与文章形式（Post Format）</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>


                    </main>
                </div>

                <div class="col-lg-4 hidden-md-down">
                    <div class="sidebar">
                        <aside class="widget card-shadow widget_text">
                            <h4 class="widget-header h6">WordPress主题：Writing</h4>

                            <div class="textwidget"><p>特色：<span class="badge badge-primary mr-2">自适应</span><span
                                    class="badge badge-warning mr-2">博客</span><span class="badge badge-info">主题选项</span></p>

                                <p>本博客主题免费下载：</p>

                                <p><a class="btn btn-warning btn-sm"
                                      href="http://blog.houduanniu.com/theme/writing?utm_source=site&amp;utm_medium=siebar">去下载</a>
                                    v0.8.0</p>

                                <p>QQ群：189678769</p>
                            </div>
                        </aside>
                        <aside class="widget card-shadow d_tag"><h4 class="widget-header h6">热门标签</h4>

                            <div class="hot-tags">
                                <a href="###" class="btn btn-light btn-sm">如何写博客</a>
                            </div>
                        </aside>
                        <aside class="widget card-shadow widget_lean_posts">
                            <h4 class="widget-header h6">最近文章</h4>

                            <ul class="list-unstyled">
                                <li>
                                    <a href="##" rel="bookmark" title="Writing-v0.8更新日志">Writing-v0.8更新日志</a>
                                </li>
                                <!--./li-->
                                <li>
                                    <a href="##" rel="bookmark" title="Writing-v0.8更新日志">Writing-v0.8更新日志</a>
                                </li>
                                <!--./li-->
                                <li>
                                    <a href="##" rel="bookmark" title="Writing-v0.8更新日志">Writing-v0.8更新日志</a>
                                </li>
                                <!--./li-->
                                <li>
                                    <a href="##" rel="bookmark" title="Writing-v0.8更新日志">Writing-v0.8更新日志</a>
                                </li>
                                <!--./li-->
                                <li>
                                    <a href="##" rel="bookmark" title="Writing-v0.8更新日志">Writing-v0.8更新日志</a>
                                </li>
                                <!--./li-->

                            </ul>
                            <!--./ul-->

                        </aside>
                        <aside class="widget card-shadow widget_nav_menu"><h4 class="widget-header h6">友情链接</h4>

                            <div>
                                <ul class="menu">
                                    <li><a href="###">一个女产品经理的博客</a></li>
                                </ul>
                            </div>
                        </aside>
                    </div>
                </div>
            </div>
        </div><!-- /.row -->
    </div><!-- /.container -->
</main>
<!-- 复用的底部 -->
<footer class="footer mt-3">
    <div class="container">
        <p class="copyright mb-0">&copy; 2012-2017 <a href="http://qingzhuti.com/" title="轻主题">轻主题</a>. <a href="http://www.miitbeian.gov.cn/" rel="external nofollow" target="_blank">京ICP备13034327号-1</a>. Design by <a href="http://qingzhuti.com/" target="_blank">qingzhuti.com</a>.</p>
    </div>
</footer>

<script type='text/javascript' src=../js/jquery.js?ver=1501648941'></script>
<script type='text/javascript' src=../js/popper.js?ver=1501648941'></script>
<script type='text/javascript' src=../js/tether.js?ver=1501648941'></script>
<script type='text/javascript' src=../js/bootstrap.min.js?ver=1501648941'></script>
</body>
</html>
